import 'package:distribution_mall_flutter/constant/cf_constant.dart';
import 'package:distribution_mall_flutter/provider/address/address_query.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';

class TrackLine<T> extends StatelessWidget {
  final List<T> data;
  final int? activeIndex;
  final Color activeColor;
  final Widget Function(T data, int i)? cotentBuilder;
  final Widget Function(T data, int i)? titleBuilder;
  final Function(T item, int i)? onTap;
  final double pointTop;
  const TrackLine(
      {super.key,
      required this.data,
      this.activeColor = Colors.black,
      this.activeIndex,
      this.cotentBuilder,
      this.titleBuilder,
      this.onTap,
      this.pointTop = 0});

  //灰色部分
  Widget _grayCenter(BuildContext context) {
    List<Widget> widgets = [];
    for (int i = 0; i < data.length; i++) {
      Widget widget = _getRow(data[i], i);
      widgets.add(widget);
    }

    return Container(
      width: double.infinity,
      padding: const EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(3),
      ),
      // padding: const EdgeInsets.only(left: 0, right: 15, top: 15, bottom: 15),
      child: Column(
        children: widgets,
      ),
    );
  }

  Widget _getRow(item, index) {
    Widget pointWidget = ClipOval(
      child: Container(
        width: item.isChild == true ? 7 : 13.7,
        height: item.isChild == true ? 7 : 13.7,
        color: const Color.fromRGBO(217, 217, 217, 1),
      ),
    );

    // 渲染 点
    Widget activePointWidget = Visibility(
      visible: activeIndex == index || data.length - 1 == index,
      child: Container(
        width: 13.7,
        height: 13.7,
        alignment: Alignment.center,
        child: Animate(
          onPlay: (controller) => controller.repeat(), // loop
        ).custom(
          begin: 0,
          end: 8,
          duration: const Duration(seconds: 2),
          builder: (context, value, child) => Container(
            width: 10,
            height: 10,
            decoration: BoxDecoration(
                color: const Color.fromRGBO(93, 132, 186, 1),
                borderRadius: BorderRadius.circular(20),
                boxShadow: [
                  BoxShadow(
                    color: const Color.fromRGBO(93, 132, 186, 1),
                    blurRadius: value,
                  )
                ]),
            child: child, // child is the Text widget being animated
          ),
        ),
      ),
    );

    return GestureDetector(
      onTap: () {
        if (onTap is Function) {
          onTap!(item, index);
        }
      },
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.white,
                  padding: const EdgeInsets.only(left: 40),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      titleBuilder == null
                          ? Row(
                              children: [
                                SizedBox(
                                  width: 300,
                                  child: Text(
                                    item?.name ?? '',
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyle(
                                        color: activeIndex != index
                                            ? const Color.fromRGBO(
                                                119, 119, 119, 1)
                                            : activeColor,
                                        fontSize: FontConstant.f127,
                                        letterSpacing:
                                            TextConstant.letterSpacing),
                                  ),
                                )
                              ],
                            )
                          : titleBuilder!(item, index),
                      // 详情渲染
                      cotentBuilder == null
                          ? const SizedBox.shrink()
                          : cotentBuilder!(item, index),
                    ],
                  ),
                ),
                Positioned(
                  left: 10,
                  width: 37,
                  bottom: 0,
                  top: pointTop,
                  child: SizedBox(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        (activeIndex == null && data.length - 1 == index) ||
                                (activeIndex == index)
                            ? activePointWidget
                            : pointWidget,
                        Visibility(
                            visible:
                                data.length > 1 && data.length - 1 != index,
                            child: Expanded(
                              child: SizedBox(
                                width: 13.7,
                                child: LayoutBuilder(
                                  builder: (BuildContext context,
                                      BoxConstraints constraints) {
                                    final height =
                                        constraints.constrainHeight();
                                    const dashWidth = 4.0;
                                    final dashCount =
                                        (height / (dashWidth)).floor();

                                    return Flex(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      direction: Axis.vertical,
                                      children: List.generate(dashCount, (_) {
                                        return const SizedBox(
                                          width: 0.5,
                                          height: dashWidth,
                                          child: DecoratedBox(
                                            decoration: BoxDecoration(
                                                color: Color.fromRGBO(
                                                    141, 141, 141, 1)),
                                          ),
                                        );
                                      }),
                                    );
                                  },
                                ),
                              ),
                            )),
                        // data.length > 1
                        //     ? activePointWidget
                        //     : const SizedBox.shrink()
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return _grayCenter(context);
  }
}

class FormatTrckLineEntity {
  String? name;
  String? des;
  int? time;
  bool? isChild;

  FormatTrckLineEntity({
    this.name,
    this.des,
    this.time,
    this.isChild,
  });

  factory FormatTrckLineEntity.fromJson(Map<String, dynamic> json) =>
      FormatTrckLineEntity(
        name: json["name"],
        des: json["des"],
        time: json["time"],
        isChild: json["isChild"],
      );

  Map<String, dynamic> toJson() => {
        "name": name,
        "des": des,
        "time": time,
        "isChild": isChild,
      };
}
